<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        /* li:nth-child(2n+1){
            background-color: red;
        }
        li:nth-child(2n){
            background-color: orange;
        } */
    </style>
</head>
<body>
    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
        <li>li_7</li>
        <li>li_8</li>
    </ul>

    <script>

        // js  实现 隔行变色

        var lis = document.getElementsByTagName('li');
        for(var i =0;i<lis.length;i++){
            // 奇数行  索引是偶数
            if(i%2===0){
                lis[i].style.backgroundColor = 'red';
            }else{
                lis[i].style.backgroundColor = 'orange';
            }

            // 偶数行 索引是 奇数
        }

        // 鼠标进入时 ,将颜色变为蓝色,离开时 还原
        // 事件源是 li,每一个 li 都要绑上事件 怎么办
        // 可以借助 for 循环  绑定

        var colorBefore; // 思考 为什么 colorBefore 声明到 全局
        for(var i =0;i<lis.length;i++){
           lis[i].onmouseenter = function(){
            colorBefore = this.style.backgroundColor; // 获取之前的颜色

            //    改变背景色 进入那个 li  就改变 哪个  li
            //  就可以使用 this, 事件绑给谁,this就指向谁
            // 思考 不用this  用 lis[i] 行不行?  虽然看起来很合理,但是明确告诉你不行
            this.style.backgroundColor = 'blue';
           }

           lis[i].onmouseleave = function(){
                //    今天的难点
                //    还原颜色
                // 获取一下原来的颜色,但是,鼠标进入后,原来的颜色已经丢失,需要提前把 原来的颜色 保存好
                 this.style.backgroundColor = colorBefore;
           }
        }
    </script>
</body>
</html>